<template>
	<view class="notOpened">
		<view class="topBg">
			<view class="title">
				<text @click="buyHistory">购买记录</text>
			</view>
			<view class="grade" :style="{ backgroundImage: 'url(' + radiusLine + ')' }">
				<block v-for="(item, index) in vipList" :key="index">
					<view v-if="
              [activeIndex - 1, activeIndex, activeIndex + 1].includes(index)
            " class="dotted" @click="onChange(item.vipId, index)">
						<view><text style="font-size: 24rpx;">{{ item.vipName }}</text></view>
					</view>
				</block>
			</view>
			<view class="vipLogo" :style="{ backgroundImage: 'url(' + quanyiBG + ')' }">
				<view class="top-container">
					<view class="headerIcon">
						<image :src='userInfo.icon' style='width:100%;height:100%'/>
					</view>
					<view class="userPhone">
						<view>{{
              (tel && tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")) || "-"
            }}</view>
						<view>{{ vipDataDetail.vipNumber }}将于{{ vipDataDetail.expirationEndDate }}过期</view>
					</view>
				</view>
				<view class="bottom-container">
					<view class="text-info">
						<!-- <span>LV1累计已</span>
            <span>省1992.22元</span> -->
					</view>
					<view class="btn" @click="toReNew">续费</view>
				</view>
			</view>
		</view>
		<view class="rewardBox">
			<view class="title" :style="{ backgroundImage: 'url(' + titleBg + ')' }">我的权益</view>
			<view v-if="isQY" class="integralCouponList">
				<view v-if="list.equityServiceDiscountsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`"/>
						<view class="text-1">服务费单价</view>
					</view>
					<view class="tip">{{list.equityServiceDiscountsStr}}</view>
				</view>
				<view v-if="list.equityBoundsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jianglijin3703530708666233956.png`"/>
						<view class="text-1">奖励金</view>
					</view>
					<view class="tip">{{list.equityBoundsStr}}</view>
				</view>
				<view v-if="list.discountLimitCountstr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_mianfuwucishu1479319900652158668.png`"/>
						<view class="text-1">免服务费次数</view>
					</view>
					<view class="tip">{{list.discountLimitCountstr}}</view>
				</view>
				<view v-if="list.equityPointsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jifen2011325536646060104216.png`"/>
						<view class="text-1">积分</view>
					</view>
					<view class="tip">{{list.equityPointsStr}}</view>
				</view>
				<view v-if="list.equityCouponStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`"/>
						<view class="text-1">优惠券</view>
					</view>
					<view class="tip">{{list.equityCouponStr}}</view>
				</view>
				<view v-if="list.equityCardStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon-kabao.png`"/>
						<view class="text-1">卡</view>
					</view>
					<view class="tip">{{list.equityCardStr}}</view>
				</view>
			</view>
			<view v-if="!isQY" class="integralCouponList">
				<view class="none">暂无数据</view>
			</view>
			<view style="display: flex; align-items: center">
				<view class="my-line"/>
				<view class="my-dot"/>
				<view class="title" style="color: #c19c68">卡券</view>
				<view class="my-dot"/>
				<view class="my-line"/>
			</view>
			<view v-if="isKJ" class="cashCouponList">
				<view v-for="(item, index) in list.couponVoList" :key="index" class="cashCouponItem"
					:style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<view>{{ item.couponTypeStr }}</view>
					<view>
						<text v-if="item.couponTypeStr!='折扣券'" style="font-size:20rpx;">¥</text>
						{{ item.couponQuota }}
						<text v-if="item.couponTypeStr=='折扣券'" style="font-size:20rpx;">折 </text>
						<text v-if="item.num>1" style="font-size:22rpx;">X{{ item.num }}</text>  
					</view>
					<view>满{{item.useSillStr}}可用</view>
				</view>
				<view v-for="(item, index) in list.cardVoList" :key="index" class="cashCouponItem"
					:style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<template  v-if="item.cardTypeStr=='次数卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}次
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>低于{{item.useSillStr}}可用</view>
					</template>
					<template  v-if="item.cardTypeStr=='电量卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}度
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
					</template>
					<template v-if="item.cardTypeStr=='折扣卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}折
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>满{{item.useSillStr}}可用</view>
					</template>

				</view>
			</view>
			<view v-if="!isKJ" class="cashCouponList">
				<view class="none">暂无数据</view>
			</view>
			<view v-if="vipDataDetail.discountLimit != 1" class="left-tips">
				<span>本月服务费单价优惠次数剩余</span>
				<span>{{ vipDataDetail.discountLimitCount || 0 }}次</span>
			</view>
		</view>
		<view class="desc">
			<view class="activityTitle">活动说明</view>
			<view class="activityLine"/>
			<view v-if="sellerNo=='hyc'" class="activityContent">
				<view style="font-size: 32rpx; font-weight: bold;">一、VIP会员</view>
				<view>1.会员权益一经购买立即生效，生效后不支持退款</view>
				<view>2.会员有效期：目前有月卡、季卡、年卡可供选择，例：购买月卡后，自购买之日起，30天后失效</view>
				<view>3.服务费优惠：会员有效期内，可享受服务费折扣6折，例：服务费为0.65元/度，则打折后服务费为0.65*0.6=0.39元/度</view>
				<view>4.用户在同一时间段内仅限生效一张会员卡，如若购买多次，则按生效时间依次生效</view>
				<view style="font-size: 32rpx; font-weight: bold;">二、电量卡</view>
				<view>1.购买后立即生效，电量卡一经抵扣，结余电量不支持申请退款</view>
				<view>2.电量卡购买后有效期为30天，有效期内电量卡未抵扣完结余电量可顺延30天，超时失效</view>
				<view>3.使用电量卡抵扣时，如电量卡剩余电量不足以抵扣，超出部分电量则按照站点原价计算费用</view>
			</view>
			<view v-else class="activityContent">
				<view>1.服务费优惠：付费会员期间，可享受服务费折扣</view>
				<view>2.奖励金：虚拟金额，可抵扣服务费，不可提现</view>
				<view>3.免服务费次数：可全额减免服务费次数</view>
				<view>4.积分：积分与成长等级会员关联，可享受成长等级会员权益</view>
				<view>5.优惠券：可用于订单金额减免</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	hasvipInfos,
	myVipDetail,
	noVipDetail
} from "@/api/marketing/vip";
	var https_1 = require("@/api/https.js");
	const app = getApp();
	export default {
		data() {
			return {
				sellerNo: app.globalData.sellerNo,

				imgUrlBase: `${app.globalData.imgUrl}/group1/image`,
				imgUrlBase2: `${app.globalData.imgUrl}/group1/operateSchemeImage`,
				tel: uni.getStorageSync("tel"),
				color: uni.getStorageSync("defaultColor_Green"),
				radiusLine: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/radiusLine.png`,
				quanyiBG: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/bgQuanyi.png`,
				titleBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/title_bg.png`,
				integralBg: `${app.globalData.imgUrl}/group1/image/bg-红包5991183492684728172.png`,
				vipList: [],
				activeIndex: 1,
				vipId: undefined,
				vipDataDetail: {},
				isQY: undefined,
				isKJ: undefined,
				userInfo: {},
				list: ""
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onShow() {
			this.getMyVipDetail();
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			async getNoVipDetail() {
				let {
					code,
					data
				} = await noVipDetail()
				if (code === 200) {
					return data
				}
			},
			// 已开通会员
			getMyVipDetail() {
				myVipDetail().then((res) => {
					if (res.code == 200) {
						this.vipList = res.data;
						// 占位元素，仅用于将已开通会员首个元素居中
						this.vipList.unshift({
							vipName: "",
							vipId: 0
						});
						this.vipId = this.vipList[this.activeIndex].vipId;
						this.getMyInfo();
					}
				});
			},
			getMyInfo() {
				hasvipInfos(this.vipId).then((res) => {
					if (res.code == 200) {
						this.vipDataDetail = res.data;
						this.list = this.vipDataDetail.marketVipExclusiveBenefitsVo
						if (!this.list) {
							this.isQY = false
							this.isKJ = false
						} else {
							if (
								!this.list.discountLimitCountstr &&
								!this.list.equityBoundsStr &&
								!this.list.equityCouponStr &&
								!this.list.equityPointsStr &&
								!this.list.equityServiceDiscountsStr
							) {
								this.isQY = false;
							} else {
								this.isQY = true;
							}
							if (!this.list.cardVoList && !this.list.couponVoList) {
								this.isKJ = false;
							} else {
								this.isKJ = true;
							}

							// 处理卡里面的次数卡数值
							if (this.list.cardVoList?.length > 0) {
								this.list.cardVoList.forEach((vm, index) => {
									if(vm.cardTypeStr=='次数卡'){
										vm.cardQuota = Math.round(vm.cardQuota)
									}
								})
							} else {
								this.list.cardVoList = null;
							}
						}
						this.$set(this.vipDataDetail);
						uni.setNavigationBarTitle({
							title: this.vipDataDetail.memberName || '权益中心'
						});
					}
				});
			},
			onChange(vipId, index) {
				if (vipId === 0) {
					uni.showToast({
						title: "已是最低等级!",
						icon: "none",
					});
					return;
				}
				this.vipId = vipId;
				this.activeIndex = index;
				this.getMyInfo();
			},
			//购买记录
			buyHistory() {
				uni.navigateTo({
					url: "/marketing_page/pages/member/purchase_history/purchase_history",
				});
			},
			// 续费
			async toReNew() {
				// let noVipList = await this.getNoVipDetail()
				// let vipItem = noVipList.find(i => i.vipId == this.vipId)
				// console.log(noVipList, 'vipItemvipItem')
				// console.log(this.vipId, 'vipItemvipItem')
				// if (vipItem && vipItem.vipId) {
					const type = "has"
					console.log('111', this.vipList)
					const remId = this.vipList[this.vipList.length - 1].vipId
					uni.navigateTo({
						url: `/mine/pages/vip/hasVip?id=${this.vipId}&from=${type}&remId=${remId}`,
					});
				// } else {
				// 	uni.navigateTo({
				// 		url: "/mine/pages/vip/noVip?id=" + noVipList[0].vipId,
				// 	});
				// }

			},
		},
	};
</script>

<style lang="less" scoped>
	.notOpened {
		width: 100%;
		min-height: 100vh;
		position: relative;
	}

	.topBg {
		width: 750rpx;
		max-height: 900rpx;
		background: linear-gradient(180deg, #030507 0%, rgba(3, 5, 7, 0) 100%);
		border-radius: 0rpx;

		.title {
			width: 100%;
			height: 130rpx;
			line-height: 80rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #d8d8d8;
		}
	}

	.grade {
		width: 750rpx;
		height: 52rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		background-size: 106% 100%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;

		>.dotted {
			width: 20rpx;
			height: 20rpx;
			background-color: rgba(216, 216, 216, 0.4);
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			>view {
				width: 12rpx;
				height: 12rpx;
				background: #d8d8d8;
				opacity: 1;
				border-radius: 50%;

				>text {
					position: absolute;
					top: -45rpx;
					right: -15rpx;
					color: #fff;
					font-size: 34rpx;
				}
			}
		}

		>view:nth-of-type(1) {
			position: absolute;
			left: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}

		>view:nth-of-type(2) {
			position: absolute;
			top: -10rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		>view:nth-of-type(3) {
			position: absolute;
			right: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}
	}

	.vipLogo {
		width: 94%;
		min-height: 306rpx;
		margin: 24rpx auto;
		border-radius: 20rpx;
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: -110rpx center;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		// justify-content: flex-start;
		// align-items: center;

		.bottom-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 100rpx;

			.text-info {
				color: #ffffff;

				span:first-child {
					font-weight: 400;
					font-size: 26rpx;
				}

				span:last-child {
					font-weight: 400;
					font-size: 32rpx;
					margin-left: 10rpx;
				}
			}

			.btn {
				width: 140rpx;
				height: 64rpx;
				background: linear-gradient(179deg, #e8c889 0%, #edbe60 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				opacity: 1;
				color: #ffffff;
				text-align: center;
				line-height: 64rpx;
			}
		}

		.top-container {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}

		.headerIcon {
			width: 100rpx;
			height: 100rpx;
			background-color: #f5f7fa;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.userPhone {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			>view:nth-of-type(1) {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #d4baa2;
			}

			>view:nth-of-type(2) {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 26rpx;
			}
		}
	}

	.package {
		width: 100%;
		background-color: #f5f7fa;
		// position: absolute;
		// top: 440rpx;
		// left: 0;
		border-radius: 20rpx;

		.membersList {
			width: 94vw;
			margin: 0 auto;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 40rpx 0rpx 0rpx 0rpx;
			box-sizing: border-box;

			.memberScrollList {
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.memberItem {
				width: 220rpx;
				height: 280rpx;
				margin: 0 16rpx;
				background: linear-gradient(360deg,
						#ffffff 0%,
						#ffffff 31%,
						#f4f6f8 99%,
						#f4f6f8 100%);
				box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
				border-radius: 16rpx;
				border: 1rpx solid #ffffff;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tehui {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 40rpx;
					background: #f7a14a;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					text-align: center;
					line-height: 40rpx;
				}

				.checked {
					position: absolute;
					top: -1rpx;
					right: -1rpx;
				}

				.lijianActive {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #e8c889 0%, #edbe60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
				}

				.lijian {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #e8c889 0%, #edbe60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.memberActive {
				background: linear-gradient(179deg,
						rgba(232, 200, 137, 0.16) 0%,
						rgba(237, 190, 96, 0.16) 100%);
				border-radius: 16rpx;
				border: 1rpx solid #db9132;
				overflow: hidden;
			}
		}

		.checked {
			width: 50rpx;
			height: 50rpx;
		}

		.tips {
			width: 94%;
			margin: 16rpx auto;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}
	}

	.rewardBox {
		width: 94%;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;

		.title {
			width: 240rpx;
			height: 57rpx;
			margin: -5rpx auto;
			font-size: 34rpx;
			text-align: center;
			line-height: 57rpx;
			font-weight: 400;
			color: #ffffff;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.my-line {
			width: 217rpx;
			height: 2rpx;
			background: linear-gradient(319deg,
					#e3be87 0%,
					#f4d9ae 55%,
					rgba(244, 217, 174, 0) 95%,
					rgba(244, 217, 174, 0) 100%);
			opacity: 1;
		}

		.my-dot {
			width: 11rpx;
			height: 10rpx;
			background: linear-gradient(84deg, #e5c18c 0%, #c19c68 100%);
			opacity: 1;
		}

		.left-tips {
			display: flex;
			justify-content: space-between;
			padding: 40rpx;

			span:first-child {
				color: #606266;
				font-size: 24rpx;
				font-weight: 400;
			}

			span:last-child {
				font-size: 26rpx;
				color: #606266;
			}
		}
	}

	.integralCouponList {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.none {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
	}

	.integralCouponItem {
		width: 220rpx;
		height: 160rpx;
		position: relative;

		.box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 70%;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.text-1 {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}

		.tip {
			background: #f7a14a;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: -8px;
			padding: 0 10rpx;
			left: 85rpx;
		}
	}

	.cashCouponList {
		width: 100%;
		padding: 40rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.cashCouponItem {
		width: 180rpx;
		height: 180rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		position: relative;
		margin-right: 42rpx;
		margin-bottom: 25rpx;

		>view:nth-of-type(1) {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #a26d35;
			position: absolute;
			top: 10rpx;
		}

		>view:nth-of-type(2) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 800;
			color: #f0703e;
		}

		>view:nth-of-type(3) {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #fad9b1;
			position: absolute;
			bottom: 15rpx;
		}
	}

	.cashCouponItem:nth-child(3n + 3) {
		margin-right: 0rpx;
	}

	.desc {
		width: 94%;
		min-height: 385rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.activityTitle {
		width: 100%;
	}

	.activityLine {
		width: 100%;
		height: 1rpx;
		margin: 30rpx 0;
		background-color: #dcdfe6;
	}

	.activityContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
	}

	.bottomBtn {
		padding: 10rpx 20rpx;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		width: 100%;

		.left {
			// flex: 1;
			margin: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.left_top {
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.left_bottom {
				width: 100%;
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 22rpx;
				font-weight: 400;
				color: #909399;

				span {
					font-weight: bold;
				}
			}
		}

		.right {
			// margin-left: 22rpx;
			margin: 20rpx 40rpx 20rpx 0;
			width: 260rpx;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.mingxiMask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
	}

	.bottomBtn2 {
		width: 100%;
		height: 460rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.bottomBtn_top {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;

			.title {
				width: 100%;
				text-align: center;
				line-height: 40rpx;
			}

			.productItem {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					width: 100%;
					text-align: left;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					>view:nth-of-type(1) {
						font-size: 26rpx;
						font-weight: 400;
						color: #606266;
					}

					>view:nth-of-type(2) {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #fc724c;
					}
				}
			}
		}

		.closeIcon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}

		.bottomBtn {
			padding: 10rpx 20rpx;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
			box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			border: 2rpx solid rgba(255, 255, 255, 0.549);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.left_top {
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				.left_bottom {
					width: 100%;
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #909399;
				}
			}

			.right {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
</style>